<template>
	<view>
		<!-- 我的1 -->
		<view class="top">
			<view class="top_un">
				<view class="topun_img">
					<image src="../../static/images/juserimg.png" style="width: 85%;height: 70px;margin-left: 10px;margin-top: 10px;border-radius: 50%;"></image>
				</view>
				<view class="topun_news">
					<view class="news_name" @click="tonews()">梦想</view>
					<view class="news_phone">15831077115</view>
				</view>
				<view class="top_ew">
					<image src="../../static/images/jusererwei.png" style="width: 100%;height: 35px;margin-top: 30px;margin-left: 13px;"></image>
				</view>
			</view>
			<view class="top_dw">
				<view class="topdw_menu" v-for="(item,index) in menufirst">
					<view class="menu_price">
						{{item.price}}
					</view>
					<view class="menu_wenzi">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="userbiao">
			<view class="biao_left">
				订单中心
			</view>
			<view class="biao_right">
				查看全部>
			</view>
		</view>
		
		<view class="menusecond">
			<view class="second_list" v-for="(item,index) in menusecond" key="index">
				<view class="list_img">
					<image :src="item.img" style="width: 40px;height: 35px;margin-left: 20px;margin-top: 15px;"></image>
				</view>
				<view class="list_name">
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="userlogo">
			<image src="../../static/images/juserbiao.png" style="width: 96%;height: 100%;margin-left: 2%;"></image>
		</view>
		
		<view class="menuthird">
			<view class="menuthird_listtwo" v-for="(item,index) in menuthird" key="index">
				<view class="listtwo_img">
					<image :src="item.img" style="width: 40px;height: 35px;margin-left: 50px;margin-top: 20px;"></image>
				</view>
				<view class="listtwo_name">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menufirst:[
					{price:'234.00',title:'余额'},
					{price:'0',title:'积分'},
					{price:'5',title:'关注'},
					{price:'1',title:'优惠券'}
				],
				menusecond:[
					{img:'../../static/images/jusermenu1.png',name:'待付款'},
					{img:'../../static/images/jusermenu2.png',name:'待发货'},
					{img:'../../static/images/jusermenu3.png',name:'待收获'},
					{img:'../../static/images/jusermenu4.png',name:'待评价'},
					{img:'../../static/images/jusermenu5.png',name:'售后/退款'}
				],
				menuthird:[
					{img:'../../static/images/jusermenu6.png',name:'社区信息'},
					{img:'../../static/images/jusermenu7.png',name:'申请团长'},
					{img:'../../static/images/jusermenu8.png',name:'我的地址'},
					{img:'../../static/images/jusermenu9.png',name:'积分商城'},
					{img:'../../static/images/jusermenu10.png',name:'签到领积分'},
					{img:'../../static/images/jusermenu11.png',name:'在线客服'},
				]
			}
		},
		methods: {
			tonews(){
				uni.navigateTo({
					url:'userinfos/userinfos'
				})
			}
		}
	}
</script>

<style scoped>
    .top{
		width: 96%;
		margin-left: 2%;
		height: 180px;
		background-color: #F84D39;
		color: #fff;
		border-radius: 5px 5px 10px 10px;
	}
	.top_un{
		width: 100%;
		height: 100px;
		display: flex;
		flex-wrap: nowrap;
	}
	.topun_img{
		width: 20%;
		height: 100px;
	}
	.topun_news{
		width: 50%;
		height: 100px;
		margin-left: 2%;
	}
	.news_name{
		width: 100%;
		height: 30px;
		line-height: 30px;
		margin-top: 17px;
		font-size: 14px
	}
	.news_phone{
		width: 100%;
		height: 30px;
		line-height: 30px;
	}
	.top_ew{
		width: 25%;
		height: 100px;
	}
	.top_dw{
		width: 100%;
		height: 80px;
		display: flex;
		flex-wrap: nowrap;
	}
	.topdw_menu{
		width: 25%;
		height: 80px;
	}
	.menu_price{
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-weight: 600;
		text-align: center;
	}
	.menu_wenzi{
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 20px;
	}
	.userbiao{
		width: 96%;
		height: 40px;
		line-height: 40px;
		margin-left: 2%;
		display: flex;
		flex-wrap: nowrap;
	}
	.biao_left{
		width: 50%;
		height: 40px;
		text-align: left;
		font-size: 14px;
	}
	.biao_right{
		width: 50%;
		height: 40px;
		text-align: right;
		color: #CCCCCC;
		font-size: 14px;
	}
	.menusecond{
		width: 96%;
		margin-left: 2%;
		height: 100px;
		margin-top: 5px;
		display: flex;
		flex-wrap: nowrap;
		background-color: #fff;
	}
	.second_list{
		width: 20%;
		height: 100px;
	}
	.lists_img{
		width: 100%;
		height: 80px;
	}
	.list_name{
		width: 100%;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
	    text-align: center;
	}
	.userlogo{
		width: 100%;
		height: 90px;
		margin-top: 10px;
	}
	.menuthird{
		width: 96%;
		margin-left: 2%;
		height: 220px;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
	}
	.menuthird_listtwo{
		width: 33%;
		height: 100px;
	}
	.listtwo_img{
		width: 100%;
		height: 80px;
	}
	.listtwo_name{
		width: 100%;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
	    text-align: center;
	}
</style>
